<template>
  <el-tabs v-model="activeName" @tab-click="clickTab">
    <el-tab-pane label="主起升" name="1">
      <div class="container">
        <div class="row">
          <monitoring-zhuqisheng
            :indexOfValue="selectPoint"
            key="0"
            height="400px"
            width="1600px"
          ></monitoring-zhuqisheng>
        </div>
        <div class="row">
          <div class="img">
            <img src="../../../../../assets/image/zqs.png" alt="/" style="width:90%" />
          </div>
          <div class="table">
            <el-table
              :data="tableData"
              style=""
              fit
            >
              <el-table-column width="80">
                <template slot-scope="scope">
                  <el-checkbox
                    v-model="scope.row.selected"
                    @change="selectPointChange(scope.row)"
                  ></el-checkbox>
                </template>
              </el-table-column>
              <el-table-column prop="Id" label="序号" width="150">
              </el-table-column>
              <el-table-column prop="t001" label="监测位置" width="150">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import MonitoringZhuqisheng from "./monitoring/monitoring-zhuqisheng.vue";
export default {
  components: { MonitoringZhuqisheng },
  data() {
    return {
      activeName: "1",
      selectPoint: 0,
      tableData: [
        { Id: 1, t001: "测点1", selected: true },
        { Id: 2, t001: "测点2", selected: false },
        { Id: 3, t001: "测点3", selected: false },
        { Id: 4, t001: "测点4", selected: false },
        { Id: 5, t001: "测点5", selected: false },
        { Id: 6, t001: "测点6", selected: false },
        { Id: 7, t001: "测点7", selected: false },
        { Id: 8, t001: "测点8", selected: false },
        { Id: 9, t001: "测点9", selected: false },
        { Id: 10, t001: "测点10", selected: false },
        { Id: 11, t001: "测点11", selected: false },
      ],
    };
  },
  methods: {
    clickTab(tab) {},
    getRowClass({ row, column, rowIndex, columnIndex }) {
      return {
        background: "#06134A",
        color: "#72C22D",
      };
    },
    selectPointChange(row) {
      console.log("选中了监测点：", row.Id, row.selected);
      if (row.selected == true) {
        // 遍历所有行，取消其他行的选中状态
        for (const item of this.tableData) {
          if (item.Id != row.Id) {
            item.selected = false;
          }
        }
        // 选中了当前行，进行一些操作
        this.selectPoint = +row.Id-1;
        // ... ...
      } else {
        // 取消选中当前行的操作无效化，同时有且会有一行被选中
        row.selected = true;
      }
    },
  },
};
</script>
<style lang="less" scoped>
div.container {
  display: flex;
  flex-direction: column;
  div.row {
    display: flex;
    flex-direction: row;
    width: 100%;
    margin: 10px;
    div.img {
      flex-grow: 1;
    }
    div.table {
      flex-grow: 1;
      margin-right: 10px;
    }
  }
}
</style>